<template>
	<view class="lime-demo-block" :style="customStyle">
		<view v-if="title" class="lime-demo-block__title">
			<text class="lime-demo-block__title-text">{{title}}</text>
		</view>
		<view class="lime-demo-block__content custom-class" :style="style">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		externalClasses: ['custom-class'],
		props: {
			title: String,
			customStyle: String,
			white: Boolean,
			padding: {
				type: [String, Number],
				default: 16
			}
		},
		computed: {
			style() {
				
				return `padding-left: ${this.padding}px; padding-right: ${this.padding}px; backgroundColor: ${this.white?'white':''}`
			}
		}
	}
</script>

<style lang="stylus" scoped>
	inline-block() 
		// #ifndef APP-NVUE
		display inline-block
		// #endif
	.lime-demo-block
		&__content
			// box-sizing border-box
			// width 100%
		&__title
			padding 32px 16px 16px
			&-text
				color rgba(69, 90, 100, 0.6)
				font-weight normal
				font-size 14px
				line-height 16px
				
</style>
